<template>
  <a-modal
    title="选择服务商"
    v-model:visible="visible"
    unmount-on-close
    width="45vw"
    :bodyStyle="{ 'padding-bottom': '0', 'max-height': 'calc(100vh - 210px)' }"
  >
    <page-form :model="form" ref="formRef" style="max-height: 600px; width: 100%" layout="vertical" div="true" class="page-form">
      <div class="msg flex-row">
        <div v-if="way === 'batch'">
          是否确认批量提交<span style="color: rgb(var(--primary-6))">{{ unSyncCount }}</span
          >条进行同步
        </div>
        <div> 请选择使用哪家ETC服务商 </div>
      </div>
      <div class="content">
        <page-form-item
          field="etcSourcce"
          label="选择ETC服务商"
          required
          size="1/2"
          :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
        >
          <a-select v-model="form.etcSourcce" :options="carSyncHrhcDict.etcSourceEnums" placeholder="请选择" />
        </page-form-item>
      </div>
    </page-form>
    <template #footer>
      <a-button @click="visible = false">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="submitFn"> 确定同步 </a-button>
    </template>
  </a-modal>
</template>

<script setup name="ServiceModal">
  import { ref, provide } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import { getHrhcSubmitSync, getHrhcBatchSubmitSync } from '@/api/asset/equipment'
  import { getHrhcStatistics } from '@/api/asset/equipment'
  import { Message } from '@arco-design/web-vue'

  const visible = ref(false)
  const formRef = ref()
  const okLoading = ref(false)
  const unSyncCount = ref()
  const way = ref('')
  const emits = defineEmits(['ok'])

  const form = ref({})

  const show = (record, ways) => {
    form.value = {}
    visible.value = true
    if (record) {
      form.value.id = record.id
    }
    way.value = ways
    if (way.value == 'batch') {
      getHrhcStatistics().then(({ result }) => {
        if (result) {
          unSyncCount.value = result.unSyncCount
        }
      })
    }
  }

  const carSyncHrhcDict = usePageDict('carSyncHrhcDict')
  provide('dict', carSyncHrhcDict)

  // 提交
  const submitFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        okLoading.value = true
        let fetch = getHrhcSubmitSync
        let param = {
          id: form.value.id,
          etcSource: form.value.etcSourcce,
        }
        if (way.value == 'batch') {
          fetch = getHrhcBatchSubmitSync
          param = {
            etcSource: form.value.etcSourcce,
          }
        }
        fetch(param)
          .then((res) => {
            Message.success(res.message)
            emits('ok')
            visible.value = false
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .msg {
    font-weight: 400;
    font-size: 16px;
    color: #1d2129;
    line-height: 34px;
    margin-bottom: 8px;
  }
  .content {
    background: rgba(247, 248, 250, 0.5);
    border-radius: 0px 0px 0px 0px;
    padding: 20px;
    margin-bottom: 15px;
  }
</style>
